<template>
    
<div class="QR_code animated  bounceInDown">
     <div :class="[isshow ? 'animated zoomIn' : 'animated zoomOut','code']" >
            <p>扫码二维码</p>
            <p>进入手机端WDA管理系统</p>
            <p>
                <img src="@/assets/images/QR_code.jpg">
            </p>
             <p>店长版专用</p>
          </div>
      <div class="right" @mouseenter="enter()" @mouseleave="leave()">
          <img src="@/assets/images/tel.png">
      </div>
         
</div>
</template>
<script>
    export default{
        name:'QR_CODE',
        data(){
            return{
                isshow:false,

            }
        },
        methods:{
            enter(){
               this.isshow=true
            },
            leave(){
                this.isshow=false
            }
        }
    }
</script>
<style lang="scss" scoped>
     .show-enter-active,.show-leave-active{
         transition:all 1s;
     }
     .show-enter,.show-leave-to{
         width:0;
         height:0;
     }
     .show-enter-to,.show-leave{
          width:200px;
          height:200px;
        
     }
     .QR_code{
         height:200px;
         position: fixed;
         right:10px;
         bottom:100px;
         display:flex;
         .right{
             position:absolute;
             bottom:50px;
             right:0;
             width:40px;
             height:50px;
             background:#3498e9;
             display:flex;
             justify-content:center;
             align-items:center;
             border-radius:7px;
          }
         .code{
           position:fixed;
           right:50px;
           bottom:50px; 
            min-height:200px;
            overflow:hidden;
            font-weight:600;
            background:white;
            box-shadow: -10px 0px 30px 5px #ccc;
            padding:10px 20px;
            font-size:14px;
            p{
                 line-height:25px;
                 white-space:nowrap;
                 img{
                     width:100px;
                     height:100px;
                     margin:10px 0 0 0 ;
                 }
            }
        } 
     }
      
    
</style>
